<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-left">
        <div class="logo">
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 20v-5h-3a5 5 0 0 1-5-5v-3a5 5 0 0 1 5-5h3v13z"></path>
            <path d="M18 10a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-4l-8-10v-3h6a3 3 0 0 1 3 3z"></path>
          </svg>
          <span class="logo-text">流浪动物救助系统</span>
        </div>

        <!-- 顶部导航菜单 -->
        <div class="nav-menu">
          <div 
            v-for="item in menuItems" 
            :key="item.path"
            :class="['nav-item', { active: activeMenu === item.path }]"
            @click="navigateTo(item.path)"
          >
            <el-icon class="nav-icon"><component :is="iconMap[item.icon]" /></el-icon>
            <span class="nav-text">{{ item.label }}</span>
          </div>
        </div>
      </div>
      
      <div class="header-right">
        <!-- 全屏按钮 -->
        <el-tooltip content="全屏" placement="bottom">
          <div class="header-icon" @click="toggleFullscreen">
            <el-icon class="icon"><FullScreen /></el-icon>
          </div>
        </el-tooltip>

        <!-- 用户信息下拉菜单 -->
        <el-dropdown @command="handleDropdownCommand" trigger="click">
          <div class="user-info">
            <el-avatar :size="36" :src="userAvatar">
              <el-icon><User /></el-icon>
            </el-avatar>
            <span class="username">{{ userName || '用户' }}</span>
            <el-icon class="arrow-down"><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="wallpaper">
                <el-icon><Picture /></el-icon>
                <span>设置锁屏壁纸</span>
              </el-dropdown-item>
              <el-dropdown-item command="lock">
                <el-icon><Lock /></el-icon>
                <span>锁屏 (Ctrl+L)</span>
              </el-dropdown-item>
              <el-dropdown-item command="profile">
                <el-icon><User /></el-icon>
                <span>个人资料</span>
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="content">
      <router-view />
    </div>

    <!-- 锁屏界面 -->
    <div v-if="isLocked" class="lock-screen" @click="focusPasswordInput">
      <div 
        class="lock-background" 
        :style="lockBackgroundStyle"
      ></div>
      <div class="lock-content">
        <!-- 时间显示 -->
        <div class="lock-time">
          <div class="time-display">{{ currentTime }}</div>
          <div class="date-display">{{ currentDate }}</div>
        </div>
        
        <!-- 用户信息 -->
        <div class="lock-user-info">
          <el-avatar :size="80" :src="userAvatar" class="lock-avatar">
            <el-icon><User /></el-icon>
          </el-avatar>
          <div class="lock-username">{{ userName || '用户' }}</div>
        </div>

        <!-- 密码输入 -->
        <div class="lock-password-container">
          <el-input
            ref="passwordInputRef"
            v-model="lockPassword"
            type="password"
            placeholder="请输入密码解锁"
            size="large"
            class="lock-password-input"
            @keyup.enter="unlock"
            @focus="lockError = ''"
          >
            <template #prefix>
              <el-icon class="lock-icon"><Lock /></el-icon>
            </template>
            <template #suffix>
              <el-button 
                :icon="Lock" 
                text 
                @click="unlock"
                :loading="unlocking"
              >
                解锁
              </el-button>
            </template>
          </el-input>
          <div v-if="lockError" class="lock-error">{{ lockError }}</div>
        </div>

        <!-- 提示 -->
        <div class="lock-hint">
          <el-icon><InfoFilled /></el-icon>
          <span>按 Enter 键或点击解锁按钮</span>
        </div>
      </div>
    </div>

    <!-- 壁纸设置对话框 -->
    <el-dialog
      v-model="showWallpaperDialog"
      title="设置锁屏壁纸"
      width="600px"
      @close="handleWallpaperDialogClose"
    >
      <div class="wallpaper-dialog-content">
        <!-- 当前壁纸预览 -->
        <div class="current-wallpaper-preview">
          <div class="preview-label">当前壁纸：</div>
          <div 
            class="preview-image" 
            :style="{ backgroundImage: lockBackgroundStyle.backgroundImage || 'none' }"
          >
            <div v-if="!lockWallpaper" class="preview-default">默认壁纸</div>
          </div>
        </div>

        <!-- 壁纸选择 -->
        <div class="wallpaper-options">
          <div class="option-label">选择壁纸：</div>
          <el-radio-group v-model="selectedWallpaperType" @change="handleWallpaperTypeChange">
            <el-radio label="default">默认壁纸</el-radio>
            <el-radio label="custom">自定义图片</el-radio>
            <el-radio label="url">图片链接</el-radio>
          </el-radio-group>

          <!-- 自定义图片上传 -->
          <div v-if="selectedWallpaperType === 'custom'" class="wallpaper-upload">
            <el-upload
              :auto-upload="false"
              :on-change="handleWallpaperFileChange"
              :show-file-list="false"
              accept="image/*"
              drag
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                将图片拖到此处，或<em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  支持 jpg/png/gif 格式，建议尺寸 1920x1080
                </div>
              </template>
            </el-upload>
          </div>

          <!-- 图片链接输入 -->
          <div v-if="selectedWallpaperType === 'url'" class="wallpaper-url">
            <el-input
              v-model="wallpaperUrl"
              placeholder="请输入图片链接 URL"
              clearable
            >
              <template #prepend>图片链接</template>
            </el-input>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showWallpaperDialog = false">取消</el-button>
          <el-button type="primary" @click="saveWallpaper">保存</el-button>
          <el-button type="danger" @click="resetWallpaper" plain>恢复默认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  House, 
  Plus, 
  Files, 
  Document, 
  FullScreen, 
  User, 
  ArrowDown,
  SwitchButton,
  Lock,
  InfoFilled,
  Picture,
  UploadFilled,
  ChatDotRound,
  Message,
  UserFilled
} from '@element-plus/icons-vue';

export default {
  name: "UserHome",
  components: {
    House, 
    Plus, 
    Files, 
    Document, 
    FullScreen, 
    User,
    ChatDotRound,
    Message, 
    ArrowDown,
    SwitchButton,
    Lock,
    InfoFilled,
    Picture,
    UploadFilled,
    UserFilled
  },
  data() {
    return {
      activeMenu: '/user/dashboard',
      userAvatar: '',
      userName: '',
      userUsername: '', // 保存用户名用于密码验证
      isLocked: false, // 是否锁屏
      lockPassword: '', // 锁屏密码输入
      lockError: '', // 锁屏错误提示
      unlocking: false, // 解锁中
      currentTime: '', // 当前时间
      currentDate: '', // 当前日期
      timeTimer: null, // 时间更新定时器
      lockWallpaper: '', // 锁屏壁纸（URL 或 base64）
      showWallpaperDialog: false, // 显示壁纸设置对话框
      selectedWallpaperType: 'default', // 选中的壁纸类型
      wallpaperUrl: '', // 图片链接
      wallpaperFile: null, // 上传的文件
      menuItems: [
        { path: '/user/dashboard', label: '首页', icon: 'House' },
        { path: '/user/rescue', label: '上报救助', icon: 'Plus' },
        { path: '/user/animals', label: '动物信息', icon: 'Files' },
        { path: '/user/adoption', label: '领养材料', icon: 'Document' },
        { path: '/user/message', label: '留言板', icon: 'ChatDotRound' },
        { path: '/user/volunteerApply', label: '志愿者申请', icon: 'UserFilled' },
        { path: '/user/profile', label: '个人中心', icon: 'User' }
      ]
    };
  },
  watch: {
    '$route'(to) {
      this.activeMenu = to.path;
    }
  },
  computed: {
    iconMap() {
      return {
        House,
        Plus,
        Files,
        Document,
        User,
        ChatDotRound,
        Message,
        UserFilled
      };
    },
    // 锁屏背景样式
    lockBackgroundStyle() {
      if (this.lockWallpaper) {
        return {
          backgroundImage: `url(${this.lockWallpaper})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundColor: 'transparent'
        };
      } else {
        // 默认壁纸，不透明
        return {
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          backgroundImage: `linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 1) 100%), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="90" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>')`,
          backgroundSize: 'cover',
          backgroundColor: '#667eea'
        };
      }
    }
  },
  async mounted() {
    // 设置当前激活的菜单
    this.activeMenu = this.$route.path;
    // 加载用户信息
    await this.loadUserInfo();
    // 加载锁屏壁纸设置
    this.loadWallpaper();
    // 恢复锁屏状态
    this.restoreLockState();
    // 初始化时间
    this.updateTime();
    this.timeTimer = setInterval(() => {
      this.updateTime();
    }, 1000);
    // 绑定快捷键 Ctrl+L 锁屏
    document.addEventListener('keydown', this.handleKeyDown);
  },
  beforeUnmount() {
    // 清除定时器
    if (this.timeTimer) {
      clearInterval(this.timeTimer);
    }
    // 移除键盘事件监听
    document.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    // 加载用户信息
    async loadUserInfo() {
      const userId = localStorage.getItem('userId');
      if (!userId) return;

      try {
        const res = await axios.get(`http://localhost:8080/api/user/${userId}`);
        if (res.data.code === 200) {
          const user = res.data.data;
          this.userName = user.nickname || user.username || '用户';
          this.userUsername = user.username || ''; // 保存用户名用于密码验证
          // 处理头像URL
          if (user.avatar) {
            if (user.avatar.startsWith('/') && !user.avatar.startsWith('http')) {
              this.userAvatar = `http://localhost:8080${user.avatar}`;
            } else {
              this.userAvatar = user.avatar;
            }
          }
        }
      } catch (error) {
        console.error('加载用户信息失败:', error);
        // 如果API失败，从localStorage获取用户名
        this.userName = localStorage.getItem('username') || '用户';
      }
    },
    
    // 导航到指定路径
    navigateTo(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    
    // 退出登录
    logout() {
      ElMessageBox.confirm('确认退出登录吗？', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        localStorage.removeItem("isLoggedIn");
        localStorage.removeItem("roleId");
        localStorage.removeItem("userId");
        localStorage.removeItem("username");
        localStorage.removeItem("isLocked"); // 清除锁屏状态
        this.$router.push("/login");
        ElMessage.success("已退出登录");
      }).catch(() => {});
    },
    
    // 处理下拉菜单命令
    handleDropdownCommand(command) {
      switch (command) {
        case 'wallpaper':
          this.showWallpaperDialog = true;
          break;
        case 'lock':
          this.lockScreen();
          break;
        case 'profile':
          this.$router.push('/user/profile');
          break;
        case 'logout':
          this.logout();
          break;
      }
    },
    
    // 全屏切换
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().then(() => {
          ElMessage.success('已进入全屏');
        }).catch(() => {
          ElMessage.error('全屏失败');
        });
      } else {
        document.exitFullscreen();
        ElMessage.info('已退出全屏');
      }
    },
    
    // 锁屏
    lockScreen() {
      this.isLocked = true;
      this.lockPassword = '';
      this.lockError = '';
      // 保存锁屏状态到 localStorage
      localStorage.setItem('isLocked', 'true');
      // 延迟聚焦，确保DOM已更新
      this.$nextTick(() => {
        this.focusPasswordInput();
      });
    },
    
    // 解锁
    async unlock() {
      if (!this.lockPassword.trim()) {
        this.lockError = '请输入密码';
        return;
      }
      
      this.unlocking = true;
      this.lockError = '';
      
      try {
        // 使用登录API验证密码
        const res = await axios.post('http://localhost:8080/api/auth/login', {
          username: this.userUsername || localStorage.getItem('username') || '',
          password: this.lockPassword
        });
        
        if (res.data.code === 200) {
          this.isLocked = false;
          this.lockPassword = '';
          this.lockError = '';
          // 清除锁屏状态
          localStorage.removeItem('isLocked');
          ElMessage.success('解锁成功');
        } else {
          this.lockError = '密码错误，请重试';
          this.lockPassword = '';
        }
      } catch (error) {
        console.error('解锁失败:', error);
        this.lockError = '解锁失败，请重试';
        this.lockPassword = '';
      } finally {
        this.unlocking = false;
      }
    },
    
    // 聚焦密码输入框
    focusPasswordInput() {
      this.$nextTick(() => {
        if (this.$refs.passwordInputRef) {
          const input = this.$refs.passwordInputRef.$el.querySelector('input');
          if (input) {
            input.focus();
          }
        }
      });
    },
    
    // 更新时间
    updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      this.currentTime = `${hours}:${minutes}`;
      
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const weekday = weekdays[now.getDay()];
      this.currentDate = `${year}年${month}月${day}日 ${weekday}`;
    },
    
    // 处理键盘事件
    handleKeyDown(event) {
      // Ctrl+L 锁屏
      if (event.ctrlKey && event.key === 'l') {
        event.preventDefault();
        if (!this.isLocked) {
          this.lockScreen();
        }
      }
    },
    
    // 加载壁纸设置
    loadWallpaper() {
      const saved = localStorage.getItem('lockWallpaper');
      if (saved) {
        try {
          this.lockWallpaper = saved;
        } catch (error) {
          console.error('加载壁纸设置失败:', error);
        }
      }
    },
    
    // 恢复锁屏状态
    restoreLockState() {
      const isLocked = localStorage.getItem('isLocked') === 'true';
      if (isLocked) {
        // 延迟一下，确保用户信息已加载
        this.$nextTick(() => {
          this.isLocked = true;
          this.$nextTick(() => {
            this.focusPasswordInput();
          });
        });
      }
    },
    
    // 保存壁纸设置
    saveWallpaper() {
      if (this.selectedWallpaperType === 'default') {
        this.lockWallpaper = '';
      } else if (this.selectedWallpaperType === 'url') {
        if (!this.wallpaperUrl.trim()) {
          ElMessage.warning('请输入图片链接');
          return;
        }
        this.lockWallpaper = this.wallpaperUrl.trim();
      } else if (this.selectedWallpaperType === 'custom' && this.wallpaperFile) {
        // 将文件转换为 base64
        const reader = new FileReader();
        reader.onload = (e) => {
          this.lockWallpaper = e.target.result;
          this.saveWallpaperToStorage();
          ElMessage.success('壁纸设置成功');
          this.showWallpaperDialog = false;
        };
        reader.readAsDataURL(this.wallpaperFile.raw);
        return;
      }
      
      this.saveWallpaperToStorage();
      ElMessage.success('壁纸设置成功');
      this.showWallpaperDialog = false;
    },
    
    // 保存壁纸到本地存储
    saveWallpaperToStorage() {
      if (this.lockWallpaper) {
        localStorage.setItem('lockWallpaper', this.lockWallpaper);
      } else {
        localStorage.removeItem('lockWallpaper');
      }
    },
    
    // 恢复默认壁纸
    resetWallpaper() {
      this.lockWallpaper = '';
      this.selectedWallpaperType = 'default';
      this.wallpaperUrl = '';
      this.wallpaperFile = null;
      this.saveWallpaperToStorage();
      ElMessage.success('已恢复默认壁纸');
      this.showWallpaperDialog = false;
    },
    
    // 处理壁纸类型变化
    handleWallpaperTypeChange() {
      if (this.selectedWallpaperType === 'default') {
        this.wallpaperUrl = '';
        this.wallpaperFile = null;
      }
    },
    
    // 处理文件选择
    handleWallpaperFileChange(file) {
      this.wallpaperFile = file;
    },
    
    // 关闭壁纸对话框
    handleWallpaperDialogClose() {
      // 重置表单
      if (this.lockWallpaper) {
        if (this.lockWallpaper.startsWith('data:')) {
          this.selectedWallpaperType = 'custom';
        } else if (this.lockWallpaper.startsWith('http')) {
          this.selectedWallpaperType = 'url';
          this.wallpaperUrl = this.lockWallpaper;
        }
      } else {
        this.selectedWallpaperType = 'default';
      }
    }
  }
};
</script>

<style scoped>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 顶部导航栏 */
.header {
  height: 64px;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  position: relative;
  z-index: 1000;
  border-bottom: 1px solid #e4e7ed;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  white-space: nowrap;
}

.logo svg {
  color: #303133;
  flex-shrink: 0;
}

.logo-text {
  color: #303133;
  letter-spacing: 0.5px;
}

/* 导航菜单 */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
  font-size: 15px;
  font-weight: 500;
  position: relative;
}

.nav-item:hover {
  background: #f5f7fa;
  color: #303133;
}

.nav-item.active {
  background: #f5f7fa;
  color: #303133;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: #303133;
  border-radius: 2px 2px 0 0;
}

.nav-icon {
  font-size: 18px;
}

.nav-text {
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f5f7fa;
}

.header-icon:hover {
  background: #e4e7ed;
}

.header-icon .icon {
  font-size: 20px;
  color: #606266;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.user-info:hover {
  background: #e4e7ed;
  border-color: #d3d4d6;
}

:deep(.el-avatar) {
  border: 1px solid #e4e7ed;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow-down {
  font-size: 14px;
  color: #909399;
  transition: transform 0.3s;
}

.user-info:hover .arrow-down {
  transform: translateY(2px);
}

/* 下拉菜单样式 */
:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  font-size: 16px;
}

/* 主内容区 */
.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: #f5f7fa;
}

/* 响应式 */
@media (max-width: 1200px) {
  .nav-text {
    display: none;
  }
  
  .nav-item {
    padding: 10px 16px;
  }
  
  .header-left {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 0 16px;
    height: 56px;
  }
  
  .logo-text {
    font-size: 16px;
  }
  
  .logo svg {
    width: 24px;
    height: 24px;
  }
  
  .nav-menu {
    gap: 4px;
  }
  
  .nav-item {
    padding: 8px 12px;
  }
  
  .nav-icon {
    font-size: 16px;
  }
  
  .username {
    display: none;
  }
  
  .header-icon {
    width: 36px;
    height: 36px;
  }
  
  .user-info {
    padding: 4px;
  }
  
  .content {
    padding: 16px;
  }
}

@media (max-width: 576px) {
  .header-left {
    gap: 16px;
  }
  
  .logo-text {
    font-size: 14px;
  }
  
  .nav-item {
    padding: 8px;
  }
  
  .arrow-down {
    display: none;
  }
}

/* 锁屏样式 */
.lock-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.lock-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: lockFadeIn 0.3s ease-out;
}

@keyframes lockFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lock-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  width: 100%;
  max-width: 500px;
  padding: 40px;
  animation: lockSlideUp 0.5s ease-out;
}

@keyframes lockSlideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.lock-time {
  margin-bottom: 60px;
}

.time-display {
  font-size: 72px;
  font-weight: 300;
  letter-spacing: 4px;
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.date-display {
  font-size: 20px;
  font-weight: 400;
  opacity: 0.9;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.lock-user-info {
  margin-bottom: 40px;
}

.lock-avatar {
  margin-bottom: 16px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.lock-username {
  font-size: 24px;
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.lock-password-container {
  margin-bottom: 30px;
}

.lock-password-input {
  max-width: 400px;
  margin: 0 auto;
}

.lock-password-input :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
}

.lock-password-input :deep(.el-input__wrapper):hover {
  background: rgba(255, 255, 255, 1);
}

.lock-password-input :deep(.el-input__wrapper.is-focus) {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.lock-icon {
  color: #667eea;
  font-size: 18px;
}

.lock-error {
  margin-top: 12px;
  color: #ff6b6b;
  font-size: 14px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.lock-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0.8;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.lock-hint .el-icon {
  font-size: 16px;
}

/* 壁纸设置对话框样式 */
.wallpaper-dialog-content {
  padding: 20px 0;
}

.current-wallpaper-preview {
  margin-bottom: 30px;
}

.preview-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
  font-weight: 500;
}

.preview-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e4e7ed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.preview-default {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: 500;
}

.wallpaper-options {
  margin-top: 20px;
}

.option-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 16px;
  font-weight: 500;
}

.wallpaper-upload {
  margin-top: 16px;
}

.wallpaper-url {
  margin-top: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
